.title {
    background-color:rgb(51, 51, 51);
    height: 40px;
    line-height: 40px;
}
.title .left {
    float:left;
}
.title .right {
    float:right;
}
.title ul li {
    height: 40px;
    list-style:none;
    float: left;
    margin:0 5px;
    font-size:14px;
}
.title .right li:last-child {
    margin-left:20px;
    padding:0 20px;
    background-color: rgb(66, 66, 66);
}
.title .right li:last-child i {
    margin-right:7px;
}
.title .right li:last-child:hover {
    background-color: rgb(255,255,255);
}
.title .right li:last-child:hover a {
    color:rgb(255, 103, 1);
}
.title ul li a {
    color:rgb(176, 176, 145);
    text-decoration:none;
}
.title ul li a:hover {
    color:rgb(255,255,255);
}
.title .app {
    position:relative;
}
.title .app .ma {
    position:absolute;
    left:-40px;
    bottom: -159px;
    display: none;
}
.title .app .ma span {
    position:absolute;
    left:60px;
    top: -24px;
    border:9px solid transparent;
    border-bottom:12px solid rgb(255,255,255);
}
.title .app .ma div {
    padding:20px;
    border:1px solid black;
	background-color: rgb(255,255,255);
}
.title .app .ma div img {
    height: 100px;
    width: 100px;
}
.title .app .ma div a {
    position:absolute;
    left: 27px;
    top: 113px;
    color:black;
}
.title .app:hover .ma {
    display: block;
	z-index: 1;
    animation:move 1.5s linear;
}
@keyframes move {
    0% {
        transform:translateY(-100%);
    }
    25% {
        transform:translateY(-75%);
    }
    50% {
        transform:translateY(-50%);
    }
    75% {
        transform:translateY(-25%);
    }
    100% {
        transform:translateY(0%)
    }
}
.title .right li:last-child {
	position: relative;
}
.title .jindu {
	position:absolute;
	left: -186px;
	top: 39px;
	height: 97px;
	width: 314px;
	background-color: rgb(255,255,255);
	box-shadow: 2px 1px 10px 2px rgb(190, 208, 229);
	display: none;
}
.title .right li:last-child:hover .jindu {
	display: block;
	z-index: 1;
}
.title .jindu .body {
	width: 30px;
	margin:30px auto;
}
.title .jindu .son1 {
	animation: jindu .5s linear infinite forwards;
}
.title .jindu .son2 {
	animation: jindu .5s linear .1s infinite forwards;
}
.title .jindu .son3 {
	animation: jindu .5s linear .2s infinite forwards;
}
.title .jindu .body div {
	display: inline-block;
	width: 5px;
	height: 20px;
	margin-left:2px;
	background-color:red;
}
@keyframes jindu {
	0% {
		
	}
	100% {
		transform:scale(.5);
		background-color: rgba(0,0,0,.1);
	}
}